<div class="alert alert-block alert-success">
	<a class="close" data-dismiss="alert" href="#">×</a>
	<h4 class="alert-heading"><i class="fa fa-check-square-o"></i> Check validation!</h4>
	<p>
		You may also check the form validation by clicking on the form action button. Please try and see the results below!
	</p>
</div>

<section id="widget-grid" class="">
	<div class="row">
		<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<div class="jarviswidget" id="wid-id-1" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-deletebutton="false">
				<header>
					<span class="widget-icon"> <i class="fa fa-comments"></i> </span>
					<h2>检索条件 </h2>
				</header>
				<div>
					<div class="widget-body no-padding">
						<div class="smart-form" novalidate="novalidate">
							<fieldset>
								<div class="row">
									<section class="col col-4">
										<label class="input"> <i class="icon-prepend fa fa-user"></i>
											<input type="text" name="fname" placeholder="First name">
										</label>
									</section>
									<section class="col col-4">
										<label class="input"> <i class="icon-prepend fa fa-user"></i>
											<input type="text" name="lname" placeholder="Last name">
										</label>
									</section>
									<section class="col col-4">
										<label class="input"> <i class="icon-prepend fa fa-user"></i>
											<input type="text" name="lname1" placeholder="Last name">
										</label>
									</section>
								</div>
							</fieldset>

							<footer>
								<button type="submit" class="btn btn-primary">
									Search
								</button>
							</footer>
						</div>

					</div>
				</div>
			</div>
		</article>
	</div>


	<div class="jarviswidget jarviswidget-color-darken" id="wid-id-0" data-widget-editbutton="false" data-widget-deletebutton="false" >
		<header>
			<span class="widget-icon"> <i class="fa fa-table"></i> </span>
			<h2>Standard Data Tables </h2>
		</header>
		<div>
			<div class="jarviswidget-editbox">
				<!-- This area used as dropdown edit box -->
			</div>
			<div class="widget-body no-padding">
				<table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%">
					<thead>
					<tr>
						<th data-hide="phone">ID</th>
						<th data-class="expand"><i class="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs"></i> Name</th>
						<th data-hide="phone"><i class="fa fa-fw fa-phone text-muted hidden-md hidden-sm hidden-xs"></i> Phone</th>
						<th>Company</th>
						<th data-hide="phone,tablet"><i class="fa fa-fw fa-map-marker txt-color-blue hidden-md hidden-sm hidden-xs"></i> Zip</th>
						<th data-hide="phone,tablet">City</th>
						<th data-hide="phone,tablet"><i class="fa fa-fw fa-calendar txt-color-blue hidden-md hidden-sm hidden-xs"></i> Date</th>
					</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>Jennifer</td>
							<td>1-342-463-8341</td>
							<td>Et Rutrum Non Associates</td>
							<td>35728</td>
							<td>Fogo</td>
							<td>03/04/14</td>
						</tr>
						<tr>
							<td>2</td>
							<td>Clark</td>
							<td>1-516-859-1120</td>
							<td>Nam Ac Inc.</td>
							<td>7162</td>
							<td>Machelen</td>
							<td>03/23/13</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

</section>
<script type="text/javascript">

	pageSetUp();
	var pagefunction = function() {

		/* BASIC ;*/
		var responsiveHelper_dt_basic = undefined;
		var responsiveHelper_datatable_fixed_column = undefined;
		var responsiveHelper_datatable_col_reorder = undefined;
		var responsiveHelper_datatable_tabletools = undefined;

		var breakpointDefinition = {
			tablet : 1024,
			phone : 480
		};

		$('#dt_basic').dataTable({
			"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>"+
			"t"+
			"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
			"autoWidth" : true,
			"preDrawCallback" : function() {
				// Initialize the responsive datatables helper once.
				if (!responsiveHelper_dt_basic) {
					responsiveHelper_dt_basic = new ResponsiveDatatablesHelper($('#dt_basic'), breakpointDefinition);
				}
			},
			"rowCallback" : function(nRow) {
				responsiveHelper_dt_basic.createExpandIcon(nRow);
			},
			"drawCallback" : function(oSettings) {
				responsiveHelper_dt_basic.respond();
			}
		});

	};

	loadScript("js/plugin/datatables/jquery.dataTables.min.js", function(){
		loadScript("js/plugin/datatables/dataTables.colVis.min.js", function(){
			loadScript("js/plugin/datatables/dataTables.tableTools.min.js", function(){
				loadScript("js/plugin/datatables/dataTables.bootstrap.min.js", function(){
					loadScript("js/plugin/datatable-responsive/datatables.responsive.min.js", pagefunction)
				});
			});
		});
	});
	/*var pagedestroy = function(){
	}
	pagefunction();*/
</script>
